/**
 * The definition of the Map.
 */
var mapmatrix = [
        [[0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 3, 0, 0],
            [0, 0, 0, 0, 0, 2, 0, 0],
            [0, 0, 0, 0, 0, 1, 0, 0],
            [0, 0, 0, 4, 1, 1, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0]]
    ][0];

/*
        The definition of the direction.
        North:0
        East:1
        South:2
        West:3
*/
var dir = 1;

//The initial index x and y of the wolf.
var init_x = 0;
var init_y = 0;

var ROWS = mapmatrix.length;
var COLS = mapmatrix[0].length;
var tileID = 0;

var xmlns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svgMaze');

var drawMap = function() {
        var bg = document.createElementNS(xmlns, 'clipPath');
        bg.setAttribute('id', 'bgPath');
        var clipRect = document.createElementNS(xmlns, 'rect');
        clipRect.setAttribute('id', 'clipRect');
        clipRect.setAttribute('width', 400);
        clipRect.setAttribute('height', 400);
        bg.appendChild(clipRect);
        svg.appendChild(bg);

        var bgImage = document.createElementNS(xmlns, 'image');
        bgImage.setAttribute('id','background');
        bgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                '../res5/background.png');
        bgImage.setAttribute('height', 400);
        bgImage.setAttribute('width', 400);
        bgImage.setAttribute('clip-path', 'url(#bgPath)');
        svg.appendChild(bgImage);

        for(var y = 0; y < ROWS; y++) {
                for (var x = 0; x < COLS; x++) {
                        if (mapmatrix[y][x] === 0) {
                                var brickClip = document.createElementNS(xmlns, 'clipPath');
                                brickClip.setAttribute('id', 'brickPath'+tileID);
                                var brickClipRect = document.createElementNS(xmlns, 'rect');
                                brickClipRect.setAttribute('width', 50);
                                brickClipRect.setAttribute('height', 50);
                                brickClipRect.setAttribute('x', x * 50);
                                brickClipRect.setAttribute('y', y * 50);
                                brickClip.appendChild(brickClipRect);
                                svg.appendChild(brickClip);

                                var brickImage = document.createElementNS(xmlns, 'image');
                                brickImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res5/brick.png');
                                brickImage.setAttribute('height', 50);
                                brickImage.setAttribute('width', 50);
                                brickImage.setAttribute('clip-path', 'url(#brickPath'+ tileID + ')');
                                brickImage.setAttribute('x', x * 50);
                                brickImage.setAttribute('y', y * 50);
                                svg.appendChild(brickImage);
                                tileID++;
                        } else if (mapmatrix[y][x] === 2) {
                                init_x = x;
                                init_y = y;
                                var  wolf = document.createElementNS(xmlns, 'clipPath');
                                wolf.setAttribute('id', 'wolfPath');
                                var clipRect = document.createElementNS(xmlns, 'rect');
                                clipRect.setAttribute('id', 'clipRect');
                                clipRect.setAttribute('width', 50);
                                clipRect.setAttribute('height', 50);
                                clipRect.setAttribute('x', x*50);
                                clipRect.setAttribute('y', y*50);
                                wolf.appendChild(clipRect);
                                svg.appendChild(wolf);

                                var wolfImage = document.createElementNS(xmlns, 'image');
                                wolfImage.setAttribute('id','wolf');
                                wolfImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res5/wolf.png');
                                wolfImage.setAttribute('height', 50);
                                wolfImage.setAttribute('width', 50);
                                wolfImage.setAttribute('x', x*50);
                                wolfImage.setAttribute('y', y*50);
                                wolfImage.setAttribute('clip-path', 'url(#wolfPath)');
                                svg.appendChild(wolfImage);
                        } else if (mapmatrix[y][x] === 3) {
                                var  des = document.createElementNS(xmlns, 'clipPath');
                                des.setAttribute('id', 'desPath');
                                var clipRect = document.createElementNS(xmlns, 'rect');
                                clipRect.setAttribute('width', 50);
                                clipRect.setAttribute('height', 50);
                                clipRect.setAttribute('x', x*50);
                                clipRect.setAttribute('y', y*50);
                                des.appendChild(clipRect);
                                svg.appendChild(des);

                                var desImage = document.createElementNS(xmlns, 'image');
                                desImage.setAttribute('id','des');
                                desImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res5/home.png');
                                desImage.setAttribute('height', 35);
                                desImage.setAttribute('width', 50);
                                desImage.setAttribute('x', x*50+5);
                                desImage.setAttribute('y', y*50);
                                desImage.setAttribute('clip-path', 'url(#desPath)');
                                svg.appendChild(desImage);

                                var text = document.createElementNS(xmlns, 'text');
                                text.setAttribute('id','count');
                                text.innerHTML = "1";
                                text.setAttribute('fill', 'white');
                                text.setAttribute('x', x*50+42);
                                text.setAttribute('y', y*50+40);
                                svg.appendChild(text);
                        } else if (mapmatrix[y][x] === 4) {
                                var  sheep = document.createElementNS(xmlns, 'clipPath');
                                sheep.setAttribute('id', 'sheepPath');
                                var clipRect = document.createElementNS(xmlns, 'rect');
                                clipRect.setAttribute('width', 50);
                                clipRect.setAttribute('height', 50);
                                clipRect.setAttribute('x', x*50);
                                clipRect.setAttribute('y', y*50);
                                sheep.appendChild(clipRect);
                                svg.appendChild(sheep);

                                var sheepImage = document.createElementNS(xmlns, 'image');
                                sheepImage.setAttribute('id','sheep');
                                sheepImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                                        '../res5/sheep.png');
                                sheepImage.setAttribute('height', 35);
                                sheepImage.setAttribute('width', 50);
                                sheepImage.setAttribute('x', x*50);
                                sheepImage.setAttribute('y', y*50);
                                sheepImage.setAttribute('clip-path', 'url(#sheepPath)');
                                svg.appendChild(sheepImage);

                                //Add text 1 under the sheep.
                                var text = document.createElementNS(xmlns, 'text');
                                text.setAttribute('id','sheepCount');
                                text.innerHTML = "1";
                                text.setAttribute('fill', 'white');
                                text.setAttribute('x', x*50+32);
                                text.setAttribute('y', y*50+40);
                                svg.appendChild(text);
                        }
                }
        }
}
drawMap();

/*
        Add the animation of the wolf.
*/
var t1 = new TimelineLite();
var desx = init_x;
var desy = init_y;
var win = false;
function moveForward(judgement) {
        // console.log(dir);
        // console.log(desx);
        // console.log(desy);
        // console.log(mapmatrix[desx][desy]);
        var wolf = document.getElementById("wolf");
        if (judgement) {
                if (dir === 1 && mapmatrix[desy][desx+1] != 0) {
                desx++;
                t1.add(TweenLite.to(wolf, 0.5, {x:"+=50"}));
                } else if (dir === 2 && mapmatrix[desy+1][desx] != 0) {
                        desy++;
                        t1.add(TweenLite.to(wolf, 0.5, {y:"+=50"}));
                }else if (dir === 3 && mapmatrix[desy][desx-1] != 0) {
                        desx--;
                        t1.add(TweenLite.to(wolf, 0.5, {x:"-=50"}));
                }else if (dir === 0 && mapmatrix[desy-1][desx] != 0) {
                        desy--;
                        t1.add(TweenLite.to(wolf, 0.5, {y:"-=50"}));
                } else {
                        alert("Error");
                        win = false;
                }
        } else {
                if (mapmatrix[desy][desx] == 4) {
                        var text = document.getElementById("sheepCount");
                        t1.add(TweenLite.to(text,0,{innerHTML:"0"}));
                } else if (mapmatrix[desy][desx] == 3) {
                        var text = document.getElementById("count");
                        t1.add(TweenLite.to(text,0,{innerHTML:"0"}));
                        win = true;
                }
        }
}

function moveRight() {
        dir = 1;
        moveForward(true);
}

function moveLeft() {
        dir = 3;
        moveForward(true);
}

function moveUp() {
        dir = 0;
        moveForward(true);
}

function moveDown() {
        dir = 2;
        moveForward(true);
}

function catchSheep() {
        moveForward(false);
}

function putSheep() {
        moveForward(false);
}

function runButtonClick() {
        var code = Blockly.JavaScript.workspaceToCode(workspace);
        console.log(code);
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        try {
                alert(code);
                eval(code);
                setTimeout(check_win,5000);
        } catch (e) {
                alert(e);
        }
}

function check_win(){
    if(win){
        var t = confirm("恭喜你通过本关，是否进行下一关？");
        if(t){
            window.location.href="../course1-6.html";
        }
    } else{
        document.getElementById("hint").innerHTML = "继续编码！有些地方还不完全正确。";
    }
}

function reset() {
        location.reload();
}